<template>
  <div class="app-container">
    <el-collapse v-model="activeNames">
      <el-collapse-item name="1">
        <template #title>
            <div style="font-size: 15px;font-weight: 400;color: #333;"><span>条件查询</span></div>
        </template>
        <template #icon="{ isActive }">
          <div class="icon-ele">{{ isActive ? '展开' : '折叠' }}</div>
        </template>
        <div class="top-main">
          <el-form  class="top-form-fl" :model="param" label-width="auto" :inline="true">
            <el-form-item label="提还箱城市" style="width: 400px;"> 
              <InputBox :inputVal1="param.boxStartCity" :inputVal2="param.boxBackCity" :inputBoxConfig="inputBoxConfig"  @inputChange="inputChange"></InputBox>
            </el-form-item>

            <el-form-item label="箱型">
              <el-select v-model="param.boxType" style="width:100%" placeholder="选择箱型">
                <el-option v-for="item in param.boxTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
            <el-form-item label="箱况">
              <el-select v-model="param.boxCondition" style="width:100%" placeholder="选择箱况">
                <el-option v-for="item in param.boxConditionOptions" :key="item.value" :label="item.label"
                  :value="item.value" />
              </el-select>
            </el-form-item>
            <el-form-item label="租箱编号" prop="boxReleaseNo">
              <el-input v-model="param.boxReleaseNo" placeholder="请输入租箱编号" />
            </el-form-item>
            <el-form-item label="集装箱公司" prop="companyName">
              <el-input v-model="param.companyName" placeholder="请输入集装箱公司"/>
            </el-form-item>
          </el-form>
          <div class="top-from-fr">
            <el-button class="top-Search" @click="getTableData" type="primary">搜索</el-button>
            <el-button class="top-Refresh" @click="handleReSet">重置</el-button>
          </div>   
        </div>
      </el-collapse-item>
    </el-collapse>
    <!-- <el-row style="margin-top: 10px;min-height: 800px; "> -->
    <cardRentBox v-for="(item,index) in table.data" :key="index" :roleType="'hdck'" :cardData="item" @handleXiaDan="handleXiaDan(item)" @handleChakan="handleChakan(item)" style="float:left;">
    </cardRentBox>
    <!-- </el-row> -->
    <div class="clearFix"></div>
    <el-empty description="当前暂无广告数据" v-if="table.data.length==0" />
    <el-row style="margin-top: 10px; display: flex;justify-content: flex-end;" v-if="table.data.length>0">
      <el-pagination current-page="param.pageNum" page-size="param.pageSize" :pager-count="5"
        :page-sizes="[10, 20, 50, 100]" :total="table.config.total" background
        layout="total,sizes,prev, pager, next,jumper" @size-change="onHandleSizeChange"
        @current-change="onHandleCurrentChange" />
    </el-row>

    <!-- <el-dialog v-model="param.centerDialogVisible" title="提示" width="500" destroy-on-close center>
      <span>您还未完成企业实名认证，请您完成企业实名认证后，就可以进行相应业务功能操作啦！</span>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="param.centerDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="goAuthenticate">企业实名认证</el-button>
        </div>
      </template>
    </el-dialog> -->
  </div>
</template>

<script setup lang="ts">
import cardRentBox from '@/components/cardRentBox'
import { getTable } from '@/api/boxServer/indexNew.ts'
import citySelect from '@/components/citySelect'
import useUserStore from '@/store/modules/user'
import { computed, onMounted, reactive, ref } from 'vue';
import orderInfo from '@/store/modules/order'
import { useRouter } from 'vue-router'
import { Search, Refresh } from '@element-plus/icons-vue'
import InputBox from '@/components/inputBox'

const userStore = useUserStore()
const activeNames = ref(['0'])
const showTableItem = ref()

const param = reactive({
  loading: false,
  pageNum: 1,
  pageSize: 10,
  stateFilter: { 5: '出租中', 10: '仓库中', 15: '待发布' },
  stateColor: { 5: '#22A86D', 10: '#2158F3', 15: '#2158F3' },
  boxTypeOptions: [ // 5 - 40HQ   10 - 40GP  15 - 20HQ   20 - 20GP
    { value: '5', label: '40HQ', },
    { value: '10', label: '40GP', },
    { value: '15', label: '20HQ', },
    { value: '20', label: '20GP', },
  ],
  boxConditionOptions: [ //5-全新   10-次新  15-适货 20-混提(次新或者适货)
    { value: '15', label: '适货', },
    { value: '10', label: '次新', },
    { value: '20', label: '混提(次新或者适货)', },
    { value: '5', label: '全新', },
  ],
  beginTotalRentQty: '',
  endTotalRentQty: '',
  boxBackCity: '',
  boxStartCity: '',
  startCityOptions: [],
  backCityOptions: [],
  boxReleaseNo: '',
  companyName:'',
  typeList: [],
  centerDialogVisible: false
});


const table = reactive({
  // 列表数据（必传）
  data: [],
  // 表头内容（必传，注意格式）
  header: [
    // { key: 'releaseRentId', colWidth: '220', title: 'releaseRentId', type: 'text', isCheck: true },
    { key: 'imgUrl', colWidth: '100', title: '集装箱展示', type: 'image', width: 80, height: 80, isCheck: true },
    { key: 'carryCityName', key2: 'carryCountryName', colWidth: '160', title: '提箱城市', type: 'twoRow', isCheck: true },
    { key: 'returnCityName', key2: 'returnCountryName', colWidth: '160', title: '还箱城市', type: 'twoRow', isCheck: true },
    { key: 'unitPrice', colWidth: '120', title: '租赁价', type: 'add', before: '￥', isCheck: true },
    { key: 'boxUsagePeriod', colWidth: '120', title: '箱使期', type: 'add', after: '天', isCheck: true },
    { key: 'inventory', colWidth: '120', title: '库存', type: 'text', isCheck: true },
    // { key: 'boxType', colWidth: '120', title: '箱型', type: 'filter', filter: param.boxTypeOptions, isCheck: true },
    // { key: 'boxCondition', colWidth: '120', title: '箱况', type: 'filter', filter: param.boxConditionOptions, isCheck: true },
    { key: 'boxType', colWidth: '120', title: '箱型', type: 'filter', filter: { 5: '40HQ', 10: '40GP', 15: '20HQ', 20: '20GP' }, isCheck: true },
    { key: 'boxCondition', colWidth: '120', title: '箱况', type: 'filter', filter: { 5: '全新', 10: '次新', 15: '适货', 20: '混提' }, isCheck: true },
    {
      key: 'operate',
      colWidth: '200',
      title: '',
      type: 'operate',
      isCheck: true,
      fixed: 'right',
      buttons: [
        {
          name: '下单',
          command: 'activInfo',
          isShow: (row: any) => {
            return row.companyId != param.companyId; // 1
          },
        },
      ],
    },
  ],
  // table配置项（必传）
  config: {
    isSelection: true,
    isList: false,
    isPagination: true, // 是否分页
    total: 0, // 分页总数
    loading: false
  }
});

// 城市id回写
const startCityId = (id: string) => {
  param.boxStartCity = id
}
const backCityId = (id: string) => {
  param.boxBackCity = id
}


async function getTableData() {
  let data = {
    pageNum: param.pageNum,
    pageSize: param.pageSize,
    carryCityId: param.boxStartCity,
    returnCityId: param.boxBackCity,
    releaseNo: param.boxReleaseNo?.trim(),
    companyName:param.companyName?.trim(),
    boxType: param.boxType,
    boxCondition: param.boxCondition,
    beginTotalRentQty: param.beginTotalRentQty - 0 || "",
    endTotalRentQty: param.endTotalRentQty - 0 || "",
  };
  table.config.loading = true;
  // 获取列表数据
  getTable(data).then((res: any) => {
    // console.log(JSON.parse(JSON.stringify(res.data.list)))
    table.data = JSON.parse(JSON.stringify(res.data.list));
    table.data.forEach((item: any) => {
      let mainFileList = JSON.parse(item.mainFileList);
      item.imgUrl = mainFileList.map((item: any) => {
        return item.url
      })[0];
    });
    table.config.total = res.data.total;
  });
  table.config.loading = false;
  //userId
  const user = await userStore.getUser()
  param.companyId = user.companyId
  // console.log(user)
  console.log(data)
}
//重置
function handleReSet() {
  param.boxType = null
  param.boxCondition = null
  param.boxStartCity = null
  param.boxBackCity = null
  param.boxReleaseNo = null
  param.companyName=''
  getTableData()
}

//下单 
const router = useRouter();
const handleXiaDan = (row: any) => {
   orderInfo().setRowData(row)
    // router.push('xiaDan')
    router.push({
      path: '/placingOrder/exportOrder',
      query: {
        boxId: row.releaseRentId,
        boxType: row.boxType,
        boxCondition: row.boxCondition,
        returnCityId: row.returnCityId
      }
    });
}; 
//查看
const handleChakan = (row: any) => {
  if (userStore.getUser() && userStore.getUser().examineStatus != '10') {
    param.centerDialogVisible = true
  } else {
    // orderInfo().setRowData(row)
    // router.push('rentBoxInfo')

    router.push({
    path: '/placingOrder/exportOrder/detaisInfo',
    query: {
      type:2,
      // secondaryEditing: "true", // 是否是下架中编辑
      id: JSON.stringify(row.releaseRentId),
    }
  })

    // router.push({
    //   path: '/hdzxck/placingOrder/exportOrder',
    //   query: {
    //     boxId: row.releaseRentId,
    //     boxType: row.boxType,
    //     boxCondition: row.boxCondition,
    //     returnCityId: row.returnCityId
    //   }
    // });
  }
  // orderInfo().setRowData(row)
  // router.push({
  //   path: 'rentBoxInfo',
  //   query: { releaseRentId: row.releaseRentId,id:row.id }
  // })
    // router.push('rentBoxInfo')

};
// 实名认证
// const goAuthenticate = () => {
//   router.push('/enterpriseManage/realAuthentication')
//   param.centerDialogVisible = true
// }
// 分页数量
const onHandleSizeChange = (val: number) => {
   param.pageSize = val;
  if(param.pageNum!=1){
    param.pageNum =1
  }else{
     getTableData()
  }
};
// 分页页码
const onHandleCurrentChange = (val: number) => {
  param.pageNum = val;
  getTableData()
};

onMounted(() => {
  getTableData()
})

//修改提还箱城市
const inputChange = (val1,val2) => {
  param.boxStartCity = val1 // 提箱城市
  param.boxBackCity = val2 //还箱城市
}
const inputBoxConfig = reactive({
  placeholder1:"请输入提箱城市",
  placeholder2:"请输入还箱城市",
})
</script>